<form #projectPolicyForm="ngForm">
  <section class="form-block">
    <div class="form-group">
      <label for="projectPolicyForm">{{ 'PROJECT_CONFIG.REGISTRY' | translate }}</label>
      <div class="form-content" id="clr-wrapper-public">
        <clr-checkbox-wrapper>
          <input type="checkbox" id="clr-checkbox-wrapper-public" clrCheckbox [(ngModel)]="projectPolicy.Public" name="public"
            [disabled]="!hasChangeConfigRole" />
          <label for="clr-checkbox-wrapper-public">{{ 'PROJECT_CONFIG.PUBLIC_TOGGLE' | translate }}</label>
        </clr-checkbox-wrapper>

        <div>
          <label> {{ 'PROJECT_CONFIG.PUBLIC_POLICY' | translate }} </label>
        </div>
      </div>
    </div>
    <div class="form-group" *ngIf="withNotary || withClair">
      <label for="projectPolicyForm">{{ 'PROJECT_CONFIG.SECURITY' | translate }}</label>
      <div class="form-content">
        <div *ngIf="withNotary">
          <clr-checkbox-wrapper>
            <input type="checkbox" clrCheckbox [(ngModel)]="projectPolicy.ContentTrust" name="content-trust" [disabled]="!hasChangeConfigRole" />
            <label>{{ 'PROJECT_CONFIG.CONTENT_TRUST_TOGGLE' | translate }}</label>
          </clr-checkbox-wrapper>

          <div class="chk-explain"><label> {{ 'PROJECT_CONFIG.CONTENT_TRUST_POLCIY' | translate }} </label></div>
        </div>
        <div *ngIf="withClair" id="prevent-vulenrability-image">
          <clr-checkbox-wrapper>
            <input type="checkbox" clrCheckbox [(ngModel)]="projectPolicy.PreventVulImg" name="prevent-vulenrability-image-input"
              [disabled]="!hasChangeConfigRole" />
            <label>{{ 'PROJECT_CONFIG.PREVENT_VULNERABLE_TOGGLE' | translate }}</label>
          </clr-checkbox-wrapper>

          <div class="chk-explain">
            <label>
              <div id="severity-blk">
                <div>{{ 'PROJECT_CONFIG.PREVENT_VULNERABLE_1' | translate }}</div>
                <div class="select">
                  <select id="severity" name="severity" [(ngModel)]="projectPolicy.PreventVulImgSeverity" [disabled]="!projectPolicy.PreventVulImg">
                    <option *ngFor='let s of severityOptions' [ngValue]="s.severity">{{ s.severityLevel | translate }}</option>
                  </select>
                </div>
                <div> {{ 'PROJECT_CONFIG.PREVENT_VULNERABLE_2' | translate }} </div>
              </div>
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group" *ngIf="withClair">
      <label for="projectPolicyForm">{{ 'PROJECT_CONFIG.SCAN' | translate }}</label>
      <div class="form-content">
        <clr-checkbox-wrapper id="scan-image-on-push-wrapper">
          <input type="checkbox" clrCheckbox [(ngModel)]="projectPolicy.ScanImgOnPush" [disabled]="!hasChangeConfigRole"
            name="scan-image-on-push" />
          <label>{{ 'PROJECT_CONFIG.AUTOSCAN_TOGGLE' | translate }}</label>
        </clr-checkbox-wrapper>
        <div class="chk-explain"><label> {{ 'PROJECT_CONFIG.AUTOSCAN_POLICY' | translate }}</label></div>
      </div>
    </div>
    <button type="button" class="btn btn-primary" (click)="save()" [disabled]="!isValid() || !hasChanges() || !hasChangeConfigRole">{{'BUTTON.SAVE'
      | translate}}</button>
    <button type="button" class="btn btn-outline" (click)="cancel()" [disabled]="!isValid() || !hasChanges() || !hasChangeConfigRole">{{'BUTTON.CANCEL'
      | translate}}</button>
    <confirmation-dialog #cfgConfirmationDialog (confirmAction)="confirmCancel($event)"></confirmation-dialog>
  </section>
</form>